.toast-it {
  position: fixed;
  animation-timing-function: ease-in;
  text-align: center;
  width: 200px;
}
.toast-top{
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  animation-name: TOAST-TOP;
}
@keyframes TOAST-TOP {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    top: 15%
  }
  80% {
    opacity: 1;
    top: 15%
  }
  100% {
    opacity: 0;
    top: 15%
  }
}
.toast-right{
  top: 50%;
  left: 80%;
  animation-name: TOAST-Right;
}
@keyframes TOAST-Right {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
    left: 60%
  }
  80% {
    opacity: 1;
    left: 60%
  }
  100% {
    opacity: 0;
    left: 60%
  }
}